<!-- 欢迎屏 -->
<template>
  <div class="content">
    <canvasfont />
    <!-- 蒙版 -->
    <div class="mask" v-if="maskframe"></div>
    <div class="corpmask" v-if="corpmask"></div>
    <cropimage
      v-if="cropimage"
      :cropimg="cropimageimg"
      @cropimage="picturetoolcropimage"
    />
    <stagetooltip v-if="stagetooltip" @childClick="stagetooltipchildClick" />
    <stagetoolload v-if="loadingframe" />
    <!-- 头部 -->
    <compileTop :title="headline" @save="compileTopsaveValue" />
    <!-- 内容 -->
    <div class="con">
      <div class="con_left">
        <!-- 内容——左——列1 -->
        <div class="material_tit">
          <div
            class=""
            v-for="(v, i) in materialTit"
            :key="i"
            @click.stop="materialTitClick(i)"
          >
            <div
              class="img_div"
              :style="{ background: v.select ? '#2b2b2b' : 'transparent' }"
            >
              <img v-if="v.select" :src="v.opt" alt="" />
              <img v-else :src="v.img" alt="" />
            </div>
            <p :class="v.select ? 'active' : ''">{{ v.tit }}</p>
          </div>
        </div>
        <!-- 内容——左——列2 -->
        <div class="material_list">
          <!-- 分类 -->
          <div class="list_classify" v-if="rightList">
            <p class="list_p active" @click.stop="materialAll()">{{ con }}</p>
            <p
              v-for="(v, i) in materialListTit"
              :key="i"
              @click.stop="materialListTitClick(i)"
              :class="['list_p', v.select ? 'active' : '']"
              :style="
                v.border
                  ? 'border-bottom:2px solid #2b2b2b'
                  : 'border-bottom:2px solid transparent'
              "
            >
              {{ v.tit }}
            </p>
          </div>
          <rightmodelseach
            v-if="rightmodelseachbox"
            :modelListSearch="modelListSearch"
            @searchVal="modelListSearchVal"
            @searchALLVal="modelSearchALLVal"
            @searchtext="modelSearchText"
          />
          <rightpicseach
            v-if="rightpicseachbox"
            :picListSearch="picListSearch"
            @searchval="picsearchval"
            @searchallval="picSearchALLVal"
            @searchtext="picSearchText"
          />
          <rightlogoseach
            v-if="rightlogoseachbox"
            :logoListSearch="logoListSearch"
            @searchval="logosearchval"
            @searchALLVal="logoSearchALLVal"
            @searchtext="logoSearchText"
          />
          <rightlist
            v-if="listbox"
            :rightlistList="rightlistList"
            :scrollTop="scrollTop"
            @TemplateListCon="TemplateListconchildByImg"
            @TemplateListPage="TemplateListPage"
            @scroll="rightListscroll"
          />
          <rightpiclist
            v-if="listpicbox"
            :rightpicList="rightpicList"
            :picscrollTop="picscrollTop"
            @childValue="rightpiclistchildValue"
            @picListPage="picListPage"
            @scroll="rightpicListscroll"
          />
          <rightlogolist
            v-if="logolistbox"
            :rightlogoList="rightlogoList"
            :logoscrollTop="logoscrollTop"
            @childValue="rightlogolistchildValue"
            @LogoListPage="LogoListPage"
            @scroll="rightlogoListscroll"
          />
          <righttextbottom
            v-if="textbottombox"
            @childValue="righttextbottomchildValue"
          />
          <rightfloat
            v-if="floatlistbox"
            @childleave="floatlistboxchildleave"
          />
        </div>
      </div>
      <!-- 内容——中 -->
      <div class="con_cen" ref="center">
        <div id="container" v-show="container" :style="scaleFun">
          <v-stage
            ref="stage"
            id="stage"
            :config="configKonva"
            @mousedown="handleMousedown"
          >
            <v-layer ref="layer">
              <!-- <v-image :config="{ image: backImg }" /> -->
              <v-rect :config="configKonva" />
              <v-image
                v-for="item in listImg"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
              />
              <!-- @mouseover="stageMouseenter" -->
              <v-image
                v-for="item in listlogo"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
              />
              <!-- @mouseover="stageMouseenter" -->
              <v-text
                v-for="item in listNote"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
              />
              <!-- @mouseover="stageMouseenter" -->
              <v-ellipse
                v-for="item in listEllipse"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
              />
              <!-- @mouseover="stageMouseenter" -->
              <v-rect
                v-for="item in listRect"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @mouseout.self="stageMouseleave"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
              />
              <!-- <v-rect
                v-for="item in keybox"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @mouseleave.self="stageMouseleave"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
              /> -->

              <v-transformer
                ref="transformerText"
                :config="{
                  rotateEnabled: true,
                  borderStroke: '#000000',
                  anchorFill: '#e9e9e9',
                  anchorSize: 5,
                  borderStrokeWidth: 2,
                  anchorSize: 20,
                  padding: 5,
                  anchorStroke: 'transparent',
                  anchorCornerRadius: 30,
                  rotateAnchorOffset: 22,
                  rotationSnapTolerance: 0,
                  shouldOverdrawWholeArea: false,
                }"
              />
            </v-layer>
          </v-stage>
        </div>
      </div>
      <div class="con_right">
        <pictureboxtool
          v-if="picturebox"
          :key="0"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="pictureboxtooldelchild"
        />
        <picturetool
          v-if="picture"
          :key="1"
          @loadele="loadele"
          @nonechild="nonechild"
          @addtrans="addtrans"
          @delchild="picturetooldelchild"
          @maskchild="picturetoolmaskchild"
          @cropele="picturetoolcropele"
          @layer="picturetoollayer"
          @update="picturetoolupdate"
          @copy="copyStageElement"
          @glassylayercancel="picturetoolglassylayercancel"
        />
        <texttool
          v-if="text"
          :key="2"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="texttooldelchild"
          @copy="copyStageElement"
          @add="addStageElement"
        />
        <datacolortool
          v-if="datacolor"
          :key="3"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="datacolortooldelchild"
        />
        <logotool
          v-if="logo"
          :key="4"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="logotooldelchild"
          @copy="copyStageElement"
        />
        <layerstool v-if="layers" @layer="picturetoollayer" />
        <!-- <tempicturetool v-if="tempicture" /> -->
      </div>
    </div>
  </div>
</template>

<script>
// import html2canvas from "html2canvas";
//复制图片
// const { ClipboardItem } = window;
//监听dom
let elementResizeDetectorMaker = require("element-resize-detector");
import compileTop from "@/components/compiletop/compiletop";
import canvasfont from "@/components/compiletop/canvasfont";
import cropimage from "@/components/compiletop/cropimage";

// import rightseach from "@/components/compileleft/rightseach";
import rightlist from "@/components/compileleft/rightlist";
import rightpiclist from "@/components/compileleft/rightpiclist";
import rightlogolist from "@/components/compileleft/rightlogolist";
import rightfloat from "@/components/compileleft/rightfloat";
import righttextbottom from "@/components/compileleft/righttextbottom";
import stagetooltip from "@/components/compilecen/stagetooltip";
import pictureboxtool from "@/components/editingtools/picturebox";
import picturetool from "@/components/editingtools/picture";
import texttool from "@/components/editingtools/text";
import datacolortool from "@/components/editingtools/datacolor";
import logotool from "@/components/editingtools/logo";
import layerstool from "@/components/editingtools/layers";
import stagetoolload from "@/components/compilecen/stagetoolload";

//import tempicturetool from "@/components/editingtools/tempicture";
import rightmodelseach from "@/components/compileleft/rightmodelseach";
import rightpicseach from "@/components/compileleft/rightpicseach";
import rightlogoseach from "@/components/compileleft/rightlogoseach";
//utils
import mixin from "@/utils/mixin";
import { mapState } from "vuex";

//请求
import {
  getLogoList,
  getLogoListAll,
  getTemplateList, //获取搜索模板列表
  getTemplateListAll, //获取模板列表
  getTemplateTindOne, //获取模板详情
  getMaterialListAll,
  getMaterialList,
} from "@/api/template";

export default {
  mixins: [mixin],
  components: {
    compileTop,
    rightpiclist,
    // rightseach,
    rightlist,
    rightlogolist,
    rightfloat,
    righttextbottom,
    stagetooltip,
    cropimage,
    // proportioncontrol,
    //tools
    pictureboxtool,
    picturetool,
    texttool,
    datacolortool,
    logotool,
    layerstool,
    stagetoolload,
    // tempicturetool,
    rightmodelseach,
    rightpicseach,
    rightlogoseach,
    canvasfont,
  },
  data() {
    //这里存放数据
    return {
      rightlistList: [], //请求模板列表
      rightlogoList: [], //logo列表
      rightpicList: [], //请求素材列表
      container: false, //舞台是否开启
      maskframe: false, //舞台蒙版
      corpmask: false, //裁剪舞台背景
      cropimage: false, //裁切图片组件
      cropimageimg: "", //当前要裁剪的图片地址

      loadingframe: false, //处理中
      templateListId: null, //暂存舞台详情id，根据返回看是否使用新模板
      stagetooltip: false, //舞台是否保存提示框
      rightmodelseachbox: true, //搜索按钮
      rightpicseachbox: false, //搜索按钮
      rightlogoseachbox: false, //搜索按钮
      modelseachtext: "", //暂存模板搜索文本
      modelListSearch: null, //模板是否开启搜索
      modelpictext: "", //暂存素材搜索文本
      picListSearch: null, //素材是否开启搜索
      modellogotext: "", //暂存logo搜索文本
      logoListSearch: null, //logo是否开启搜索
      moedelseach: true, //不在搜索状态
      picseach: true, //不在搜索状态
      logoseach: true, //不在搜索状态
      logoscrollTop: null, //返回logoscrollTop=0
      picscrollTop: null, //picscrollTop=0
      scrollTop: null, //返回scrollTop=0
      rightlistpage: 1,
      rightlistpageCount: null,
      rightlogolistpage: 1,
      rightlogolistpageCount: null,
      rightpiclistpage: 1,
      rightpiclistpageCount: null,
      rightList: true,
      listbox: true,
      logolistbox: false,
      floatlistbox: false,
      listpicbox: false,
      textbottombox: false,
      //tools
      picturebox: false,
      picture: false,
      text: false,
      datacolor: false,
      logo: false,
      layers: false,
      tempicture: false,
      //compileTop-标题
      headline: "欢迎屏编辑",
      afterbackimg: [], //置于背景之后的图片名称
      //内容——左——列1列表
      materialTit: [
        {
          img: require("@/assets/img/moban.png"),
          opt: require("@/assets/img/moban1.png"),
          tit: "模板库",
          select: true,
        },
        {
          img: require("@/assets/img/cucai.png"),
          opt: require("@/assets/img/cucai1.png"),
          tit: "素材库",
          select: false,
        },
        {
          img: require("@/assets/img/logo.png"),
          opt: require("@/assets/img/logo1.png"),
          tit: "LOGO库",
          select: false,
        },
        {
          img: require("@/assets/img/text.png"),
          opt: require("@/assets/img/text1.png"),
          tit: "文字",
          select: false,
        },
      ],
      con: "模板分类",
      // 内容——左——列2——分类名称列表
      materialListTit: [
        {
          tit: "常用",
          select: false,
          border: false,
        },
        {
          tit: "收藏",
          border: false,
          select: false,
        },
        {
          tit: "选择分类",
          border: false,
          select: false,
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState("templateStage", [
      //舞台是否开启
      "proscenium",
      //舞台大小
      "configKonva",
      //元素
      "listImg",
      "listlogo",
      "listNote",
      "listEllipse",
      "listRect",
      "keybox",
      //当前被选中的元素
      "modifyele",
      "modifyele",
      //图片大小
      "imgW",
      "imgH",
      //centerDom
      "maxW",
      "maxH",
      //舞台的元素个数
      "numberRefs",
      //选中元素name
      "selectedShapeName",
      //缩小比例
      "backSize",
      // "editbackSize",
      //舞台
      "konvaname",
      "konvaid",
      //图片数量
      "imgnum",
      //文字
      "textfontsize",
      "textfontFamily",
      "sizeListC",
      "clickname",
      "textNode",
      "backImg",
      "cancelName",
      "keyele",
    ]),
    scaleFun: function () {
      let { imgW, imgH, backSize, maxW, maxH } = this;
      return `width:${imgW}px;height:${imgH}px;transform: translate(${
        (maxW - imgW) / 2
      }px,${(maxH - imgH) / 2}px) scale(${backSize});`;
    },
  },
  //监控data中的数据变化
  watch: {
    maxW() {
      this.$datatools.debounce(
        this.$createstage.Screensize(this, this.maxW, this.maxH),
        1000
      );
    },
  },
  //方法集合
  methods: {
    //内容——左列2——分类——全部分类
    materialAll() {
      this.materialListTit.forEach((v) => {
        this.floatlistbox = false;
        v.select = false;
        v.border = false;
      });
    },
    // 内容——左——列2——分类名称——点击选中
    materialListTitClick(i) {
      this.materialListTit.forEach((v) => {
        v.select = false;
        v.border = false;
      });
      this.materialListTit[i].select = true;
      this.materialListTit[i].border = true;
      if (this.materialListTit[2].tit == "全部") return;
      else if (i == 2) this.floatlistbox = !this.floatlistbox;
      else this.floatlistbox = false;
    },
    //内容——左——列1——点击选中
    materialTitClick(i) {
      this.textbottombox = false;
      this.listbox = false;
      this.rightList = true;
      this.listpicbox = false;
      this.floatlistbox = false;
      this.logolistbox = false;
      this.rightmodelseachbox = false;
      this.rightpicseachbox = false;
      this.rightlogoseachbox = false;
      this.materialListTit.forEach((v) => {
        v.select = false;
        v.border = false;
      });
      let { tit } = this.materialTit[i];
      this.materialTit.forEach((v) => {
        v.select = false;
      });
      this.materialTit[i].select = true;
      if (tit == "模板库") {
        this.con = "模板分类";
        this.listbox = true;
        this.materialListTit.forEach((v) => {
          if (v.tit == "全部") {
            v.tit = "选择分类";
          }
        });
        this.rightmodelseachbox = true;
        this.RequestInitialData();
      } else if (tit == "素材库") {
        this.con = "素材分类";
        this.materialListTit.forEach((v) => {
          if (v.tit == "全部") {
            v.tit = "选择分类";
          }
        });
        this.listpicbox = true;
        this.rightpicseachbox = true;
        this.RequestMaterialData();
      } else if (tit == "LOGO库") {
        this.con = "LOGO";
        this.logolistbox = true;
        this.materialListTit.forEach((v) => {
          if (v.tit == "选择分类") {
            v.tit = "全部";
          }
        });
        this.rightlogoseachbox = true;
        this.RequestLogoData(1);
      } else if (tit == "文字") {
        this.rightList = false;
        this.textbottombox = true;
      }
    },
    //取消canvas右键默认事件----------------------
    cancelCanvasRightclickDefaultevent() {
      window.document.oncontextmenu = function () {
        return false;
      };
    },
    //监听dom-----------------------------------------
    listeningDom() {
      let erd = elementResizeDetectorMaker();
      erd.listenTo(this.$refs.center, (ele) => {
        this.$store.commit("templateStage/MAXW", ele.offsetWidth - 10);
        this.$store.commit("templateStage/MAXH", ele.offsetHeight - 10);
      });
    },
    //内容——左——列2——浮动盒子
    floatlistboxchildleave(value) {
      this.floatlistbox = value;
      if (this.floatlistbox == false) {
        this.materialListTit[2].select = false;
        this.materialListTit[2].border = false;
      }
    },
    //保存---------------------------------------------
    compileTopsaveValue() {
      this.$createstage.delTransformer(this);
      this.layer.draw();
      if (this.proscenium) {
        // let canvas = document.getElementsByTagName("canvas")[0];
        // let stage = this.$refs.stage.getNode();
        this.$store.commit("templateStage/SELECTEDSHAPENAME", "");
        this.$nextTick(() => {
          //   //canvas复制函数
          setTimeout(() => {
            this.canvasCopy();
          }, 50);
        });
      }
    },
    //保存复制图片工具
    async canvasCopy() {
      // let canvas = document.getElementsByTagName("canvas")[0];
      // let context = canvas.getContext("2d");
      // let image = context.getImageData(0, 0, canvas.width, canvas.height);
      // for (let i = 0; i < image.data.length; i += 4) {
      //   // 当该像素是透明的，则设置成白色
      //   if (image.data[i + 3] == 0) {
      //     image.data[i] = 255;
      //     image.data[i + 1] = 255;
      //     image.data[i + 2] = 255;
      //     image.data[i + 3] = 255;
      //   }
      // }
      // context.putImageData(image, 0, 0);
      let stage = this.$refs.stage.getNode();
      let dataURL = stage.toDataURL({ pixelRatio: 1 });
      const data = await fetch(dataURL);
      const blob = await data.blob();
      let ClipboardItem = window.ClipboardItem;
      await navigator.clipboard.write([
        new ClipboardItem({
          [blob.type]: blob,
        }),
      ]);
      this.$message("复制成功");
    },
    //工具tool-----------------------------------------
    //工具-元素锁住
    nonechild() {
      this.$createstage.delTransformer(this);
    },
    //工具-更新元素
    loadele(childValue) {
      setTimeout(() => {
        this.$nextTick(() => {
          const node = this.$refs[childValue][0].getStage();
          node.cache();
          node.getLayer().batchDraw();
        });
      }, 500);
    },
    //工具-取消上锁模式，重新添加变换器
    addtrans() {
      this.$createstage.delTransformer(this);
      this.$store.commit("templateStage/SELECTEDSHAPENAME", this.modifyele);
      this.$store.commit("templateStage/CLICKNAMEREACT", this.modifyele);
      this.$createstage.updateTransformer(this);
    },
    //picbox工具-元素锁住
    pictureboxtooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.picturebox = childValue;
    },
    //图片工具-删除元素
    picturetooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.picture = childValue;
    },
    //图片工具-是否开启蒙版
    picturetoolmaskchild(childValue) {
      this.$store.commit("popupmanage/MASKFRAME", childValue);
      this.$store.commit("popupmanage/LOADINGFRAME", childValue);
    },
    //图片工具-裁剪图片
    picturetoolcropele(childValue) {
      let src;
      this.listImg.forEach((v) => {
        if (v.config.name == childValue) {
          src = v.config.image.src;
        }
      });
      if (src) {
        this.cropimageimg = src;
        this.corpmask = true;
        this.cropimage = true;
      }
    },
     //裁剪图片
    picturetoolcropimage(childValue) {
      this.corpmask = false;
      this.cropimage = false;
      if (childValue) {
        this.$store.commit("templateStage/CUTIMG", childValue);
        setTimeout(() => {
          this.loadele(this.modifyele);
        }, 200);
      }
    },
    //图片工具-图层
    picturetoollayer(childValue) {
      this.$nextTick(() => {
        this.$store.commit("templateStage/SELECTEDSHAPENAME", childValue);
        this.$store.commit("templateStage/MODIFYELE", childValue);
        this.$store.commit("templateStage/CLICKNAMEREACT", childValue);
        this.$createstage.updateTransformer(this);
        this.$createstage.creacteTools(this, childValue);
      });
    },
    //图片工具-更新变换器
    picturetoolupdate(childValue) {
      //选中的进入数值
      let index;
      this.listImg.forEach((v, i) => {
        if (v.config.name.indexOf("imgback") != -1) return (index = i);
      });
      this.afterbackimg = [];
      this.listImg.forEach((v, i) => {
        if (i < index) {
          this.afterbackimg.push(v.config.name);
        }
      });
      //选中重新更新
      //添加变换器 - 判断是否低于背景层级 - if(低于背景图层)
      if (this.afterbackimg.indexOf(childValue) != -1)
        this.tr.shouldOverdrawWholeArea(true);
      else this.tr.shouldOverdrawWholeArea(false);
    },
    //图片工具-上锁是取消可以拖拽
    picturetoolglassylayercancel(childValue) {
      let index;
      this.listImg.forEach((v, i) => {
        if (v.config.name.indexOf("imgback") != -1) return (index = i);
      });
      let index1 = this.listImg.forEach((v, i) => {
        if (v.config.name == childValue) return i;
      });
      if (index > index1) {
        //index1小于index 他就在下面
        this.tr.shouldOverdrawWholeArea(true);
      } else this.tr.shouldOverdrawWholeArea(false);
    },
    //text工具-删除元素
    texttooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.text = childValue;
    },
    //data工具-删除元素
    datacolortooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.datacolor = childValue;
    },
    //logo工具-删除元素
    logotooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.logo = childValue;
    },
    //搜索-------------------------------------
    async modelListSearchVal(childValue, value = 1) {
      this.modelListSearch = true;
      let info = await getTemplateList({ key: childValue, pageNum: value });
      this.rightlistpageCount = info.data.pageCount;
      if (value == 1) {
        this.rightlistpage = 1;
        this.rightlistList = [];
        this.scrollTop = 0;
      }
      if (info.data.data) {
        info.data.data.forEach((v) => {
          this.rightlistList.push(v);
        });
      }
    },
    //搜索素材库
    async picsearchval(childValue, value = 1) {
      this.picListSearch = true;
      let info = await getMaterialList({ key: childValue, pageNum: value });
      this.rightpiclistpageCount = info.data.pageCount;
      if (value == 1) {
        this.rightpiclistpage = 1;
        this.rightpicList = [];
        this.picscrollTop = 0;
      }
      if (info.data.data) {
        info.data.data.forEach((v) => {
          this.rightpicList.push(v);
        });
      }
    },
    //搜索logo库
    async logosearchval(childValue, value = 1) {
      this.logoListSearch = true;
      let info = await getLogoList({ key: childValue, pageNum: value });
      this.rightlogolistpageCount = info.data.pageCount;
      if (value == 1) {
        this.rightlogolistpage = 1;
        this.rightlogoList = [];
        this.logoscrollTop = 0;
      }
      if (info.data.data) {
        info.data.data.forEach((v) => {
          this.rightlogoList.push(v);
        });
      }
    },
    rightlogoListscroll(childValue) {
      this.logoscrollTop = childValue;
    },
    rightpicListscroll(childValue) {
      this.picscrollTop = childValue;
    },
    rightListscroll(childValue) {
      this.scrollTop = childValue;
    },
    //获取搜索内容
    modelSearchText(childValue) {
      this.modelseachtext = childValue;
    },
    //获取素材搜索内容
    picSearchText(childValue) {
      this.modelpictext = childValue;
    },
    //获取logo搜索内容
    logoSearchText(childValue) {
      this.modellogotext = childValue;
    },
    //搜索 展示全部
    modelSearchALLVal() {
      this.RequestInitialData();
      this.modelListSearch = true;
    },
    picSearchALLVal() {
      this.RequestMaterialData(1);
      this.picListSearch = true;
    },
    logoSearchALLVal() {
      this.RequestLogoData(1);
    },
    //弹出框-----------------------------------
    //询问是否要替换当前模板 stagetooltip
    stagetooltipchildClick(childValue) {
      this.stagetooltip = false;
      this.maskframe = false;
      if (childValue === 1) {
        this.TemplateDetails(this.templateListId);
        this.loadingframe = true;
        this.maskframe = true;
      }
    },
    //舞台事件------------------------------------------
    //鼠标按下
    handleMousedown(e) {
      this.$createstage.stageMousedown(this, e);
    },
    // //进入舞台元素
    // stageMouseenter(e) {
    //   this.$createstage.stageMouseenter(this, e);
    // },
    //元素拖拽中或变换中
    eleDragmoveTransform(e) {
      this.$store.commit("templateStage/ELEDRAGMOVETRANSFORM", e.target);
    },
    //rightlist组件-----------------------------------
    TemplateListconchildByImg(childValue) {
      if (this.proscenium) {
        //如果舞台已经开启，先询问
        this.stagetooltip = true;
        this.templateListId = childValue;
      } else {
        //直接请求
        this.$datatools.debounce(this.TemplateDetails(childValue), 20000);
        this.loadingframe = true;
      }
      this.maskframe = true;
    },
    TemplateListPage() {
      if (this.rightlistpageCount > this.rightlistpage) {
        this.rightlistpage = this.rightlistpage + 1;
        if (this.modelseachtext)
          this.modelListSearchVal(this.modelseachtext, this.rightlistpage);
        else this.RequestInitialData(this.rightlistpage);
      }
    },
    LogoListPage() {
      if (this.rightlogolistpageCount > this.rightlogolistpage) {
        this.rightlogolistpage = this.rightlogolistpage + 1;
        if (this.modellogotext)
          this.logosearchval(this.modellogotext, this.rightlogolistpage);
        else this.RequestLogoData(this.rightlogolistpage);
      }
    },
    picListPage() {
      if (this.rightpiclistpageCount > this.rightpiclistpage) {
        this.rightpiclistpage = this.rightpiclistpage + 1;
        if (this.modelpictext)
          this.modelListSearchVal(this.modelpictext, this.rightpiclistpage);
        else this.RequestMaterialData(this.rightpiclistpage);
      }
    },
    //rightpiclist --- 替换图片
    rightpiclistchildValue(childValue) {
      if (this.proscenium) {
        if (
          this.selectedShapeName.indexOf("back") != -1 ||
          this.selectedShapeName == ""
        )
          this.$createstage.creactepicture(this, childValue, "pic");
        else {
          this.$store.commit("templateStage/CHEANGEPIC", childValue);
          this.$nextTick(() => {
            this.loadele(this.selectedShapeName);
          });
        }
      }
    },
    rightlogolistchildValue(childValue) {
      if (this.proscenium) {
        if (
          this.selectedShapeName.indexOf("back") != -1 ||
          this.selectedShapeName == ""
        )
          this.$createstage.creactepicture(this, childValue, "logo");
        else {
          this.$store.commit("templateStage/CHEANGELOGO", childValue);
          this.$nextTick(() => {
            this.loadele(this.selectedShapeName);
          });
        }
      }
    },
    //添加文字
    righttextbottomchildValue(childValue) {
      this.$createstage.creactetext(this, childValue);
    },
    //请求-----------------------------------------------------
    //模板列表 --- 详情请求事件
    async TemplateDetails(id) {
      let info = await getTemplateTindOne({ templateId: id });
      this.$createstage.templateAnalysisOfData(this, info.data.data);
      // //那些低于背景
      // // let index;
      // this.listImg.forEach((v) => {
      // //   // if (v.config.name.indexOf("imgback") != -1) {
      // //   // }
      // // });
      // // console.log('index',that.listImg);
      // // that.listImg.forEach((v, i) => {
      // //   if (i < index) {
      // //     that.afterbackimg.push(v.config.name);
      // //   }
      // });
    },
    // 请求模板数据
    async RequestInitialData(value = 1) {
      if (value == 1) {
        this.rightlistList = [];
        this.rightlistpage = 1;
        this.scrollTop = 0;
      }
      let info = await getTemplateListAll({ pageNum: value });
      this.rightlistpageCount = info.data.pageCount;
      info.data.data.forEach((v) => {
        this.rightlistList.push(v);
      });
    },
    // 请求素材
    async RequestMaterialData(value = 1) {
      if (value == 1) {
        this.rightpicList = [];
        this.rightpiclistpage = 1;
        this.picscrollTop = 0;
      }
      let info = await getMaterialListAll({ pageNum: value });
      this.rightpiclistpageCount = info.data.pageCount;
      info.data.data.forEach((v) => {
        this.rightpicList.push(v);
      });
    },
    //请求logo
    async RequestLogoData(value = 1) {
      if (value == 1) {
        this.rightlogoList = [];
        this.rightlogolistpage = 1;
        this.logoscrollTop = 0;
      }
      // if (!JSON.parse(sessionStorage.getItem("rightlogoList"))) {
      let info = await getLogoListAll({ pageNum: value });
      this.rightlogolistpageCount = info.data.pageCount;
      if (info.data.data) {
        info.data.data.forEach((v) => {
          this.rightlogoList.push(v);
        });
      }
    },
    //复制元素事件
    copyStageElement() {
      this.$datatools.debounce(this.$createstage.copymodifyele(this), 2000); //设置防抖
    },
    //添加文本
    addStageElement() {
      this.$datatools.debounce(
        this.$createstage.creactetext(this, "text"),
        2000
      ); //设置防抖
    },
    //键盘事件-----------------------------------------
    KeyboardEvent() {
      let that = this;
      document.onkeyup = function () {
        let key = window.event.keyCode;
        if (that.proscenium) {
          window.event.preventDefault(); //关闭浏览器快捷键
          if (key == 67 && event.altKey) {
            that.$datatools.debounce(
              that.$createstage.copymodifyele(that),
              2000
            ); //设置防抖
          } else if (key == 46) {
            //如果舞台有元素直接删掉
            that.$datatools.debounce(
              that.$createstage.delmodifyele(that),
              2000
            ); //设置防抖
          }
        }
        if (key == 13) {
          if (that.rightmodelseachbox) {
            if (that.modelseachtext == "") return;
            else that.modelListSearch = false;
          } else if (that.rightpicseachbox) {
            if (that.modelpictext == "") return;
            else that.picListSearch = false;
          } else if (that.rightlogoseachbox) {
            if (that.modellogotext == "") return;
            else that.logoListSearch = false;
          }
        }
      };
    },
  },
  beforeCreate() {
    // this.reload();
  }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$createstage.ClearingVuex(this);
    this.layer = this.$refs.layer.getNode();
    this.stage = this.$refs.stage.getNode();
    this.tr = this.$refs.transformerText.getNode();
    this.RequestInitialData(this.rightlistpage); //初始化模板数据
    this.KeyboardEvent(); //键盘事件
    this.listeningDom();
    this.cancelCanvasRightclickDefaultevent();
    // // this.RequestLogoData();
    //   let canvas = document.getElementsByTagName("canvas")[0];
    //   let context = canvas.getContext("2d");
    //   // 将canvas的透明背景设置成白色
    //   let imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    //   for (let i = 0; i < imageData.data.length; i += 4) {
    //     // 当该像素是透明的，则设置成白色
    //     if (imageData.data[i + 3] == 0) {
    //       imageData.data[i] = 255;
    //       imageData.data[i + 1] = 255;
    //       imageData.data[i + 2] = 255;
    //       imageData.data[i + 3] = 255;
    //     }
    //   }
    //   context.putImageData(imageData, 0, 0);
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.content {
  position: relative;
  .outer();
  #id {
    height: 0;
    overflow: hidden;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(33, 33, 33, 0.24);
    z-index: 100;
  }
  .con {
    .con();
    .con_left {
      position: relative;
      height: 100%;
      .material_tit {
        width: 72px;
        height: 100%;
        float: left;
        font-size: @size;
        .roll();
        & > div {
          cursor: pointer;
          width: 100%;
          margin-top: 24px;
          .divDWJ();
          .img_div {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background-color: @color2;
            .divDAJ();
          }
          & img {
            width: 22px;
            height: 22px;
          }
          & P {
            width: 100%;
            text-align: center;
          }
        }
        & > div:nth-child(1) {
          margin-top: 0px;
          padding-top: 16px;
        }
      }
      .material_list {
        .conleftright();
        .list_classify {
          height: 42px;
          font-size: @size;
          .divAJS();
          .list_p {
            cursor: pointer;
            padding: 4px 0;
          }
        }
        .rightfloat-enter-active,
        .rightfloat-leave-active {
          transition: all ease 1s;
        }
      }
    }
    .con_cen {
      position: relative;
      width: calc(100vw - 620px);
      height: 100%;
      // overflow: auto;

      // .cen();
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 7px;
        background-color: #fff;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        // box-shadow: inset 0 0 6px rgb(86, 82, 82);
        background: rgb(186, 180, 180);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // box-shadow: inset 0 0 5px rgb(86, 82, 82);
        border-radius: 10px;
        // background: #fff;
      }
      // .divDJ();
      #container {
        // max-height: 100%;
        // max-width: 100%;
        background: #fff;
        position: relative;
        .stagemask {
          position: absolute;
          z-index: 9999;
          width: 100%;
          height: 100%;
          background: rgba(51, 49, 49, 0.766);
        }
      }
    }
    .con_right {
      .conright();
    }
  }
}
</style>